<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-28 19:21:30
 * @LastEditors: chaixinyu
 * @LastEditTime: 2023-01-13 16:19:14
-->
<template>
  <div class="course-sign">

    <!-- 导航栏 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">

      <template #title>

        <div class="title">
          签到
        </div>

      </template>

    </van-nav-bar>

    <!-- 签到成功 -->
    <div class="sign-succeed">
      <span class="succeed">签 到 成 功</span>
      <span class="time">{{sianSuccessTime}}</span>
    </div>
  </div>
</template>

<script setup>
import { NavBar } from 'vant';

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';

// 引入路由
import { useRoute } from 'vue-router'

// 实例化仓库对象
const course = useCourseStore()

// 实例化仓库对象
const route = useRoute()

// 解构 数据
const {sianSuccessTime} = storeToRefs(course)

// 解构 方法
const {getSignSuccessTime} = course

// 组件挂载完毕
onMounted( async() => {
  try{

    // 整理参数
    const params = {
      signId:parseInt(route.params.signId),
      userId:1
    }

    // 获取签到时间
    await getSignSuccessTime(params)

  }catch(err){
    alert(err.message)
  }
})

// 返回上一级
const onClickLeft = () => history.back();
</script>

<style lang="less" scoped>
.course-sign{
  :deep(.van-icon) {
    color: black;
  }

  .sign-succeed{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 620px;

    span{
      text-align: center;
      width: 100px;
    }

    .succeed{
      margin-bottom: 15px;
      font-size: 16px;
      color: #92b585;
    }
    
    .time{
      color: #c9c9c9;
    }
  }
}

</style>

